<template>
  <Modal v-model="visible"
         :title="dataForm.id ? '编辑栏目' : '新增栏目'"
         :closable="false"
         :mask-closable="false">
    <Form ref="dataForm" :model="dataForm" :rules="ruleValidate" :label-width="80">
      <FormItem label="外部链接标题" prop="name">
        <Input v-model="dataForm.title" placeholder="请输入标题名" clearable></Input>
      </FormItem>
      <FormItem label="外部链接标题" prop="name">
        <Input v-model="dataForm.linkUrl" placeholder="请输入标题名" clearable></Input>
      </FormItem>
    </Form>
    <Upload multiple
            type="drag" :action=uploadFile  name="upFile" :data="dataForm">
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>选择或拖拽上传您的标题图片O(∩_∩)O</p>
      </div>
    </Upload>
    <div slot="footer">
      <Button type="text" @click="handleCancel">取消</Button>
      <Button type="primary" :loading="showLoading" @click="handleSubmit">保存</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  props: {
    parentId: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      uploadFile: this.$http.adornUrl('/link/upload'),
      visible: false,
      disablePassword: true,
      showLoading: false,
      roleList: [],
      dataForm: {
        id: 0,
        title: '',
        linkUrl: ''
      },
      ruleValidate: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        linkUrl: [
          { required: true, message: '链接不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (id) {
      // add or update
      this.$refs['dataForm'].resetFields();
      // 清空角色id列表
      // this.dataForm.roleIdList.splice(0, this.dataForm.roleIdList.length);
      this.visible = true;
      this.dataForm.id = id || 0;
      this.$http({
        url: this.$http.adornUrl('/sys/role/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        const roles = data && data.code === 0 ? data.list : [];
        roles.forEach((item) => {
          item.color = 'default';
        });
        this.roleList = roles;
      }).then(() => {
        if (this.dataForm.id) {
          this.disablePassword = false;
          // 根据id获取详情
          this.$http({
            url: this.$http.adornUrl(`/link/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              console.log(data.link);
              this.dataForm.title = data.link.title;
              this.dataForm.linkUrl = data.link.linkUrl;
            }
          })
        }
      })
    },
    handleCheck (item, index) {
      if (this.$refs.roleTag[index].name === item.roleName) {
        if (this.roleList[index].color === '#cca4e3') {
          /* 选中状态，改为未选中，并且展示菜单详情 */
          this.roleList[index].color = 'default';
          // this.dataForm.roleIdList.pop();
        } else {
          /* 未选中状态，先选中 */
          this.roleList[index].color = '#cca4e3';
        }
      }
    },
    handleCancel () {
      this.visible = false;
      this.disablePassword = true;
      this.showLoading = false;
    },
    handleSubmit () { // 表单提交
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.showLoading = true;
          // 清空roleIdList
          this.dataForm.roleIdList = [];
          // 获取角色id列表
          this.roleList.forEach((item) => {
            if (item.color === '#cca4e3' && this.dataForm.roleIdList.indexOf(item.roleId) === -1) {
              this.dataForm.roleIdList.push(item.roleId);
            }
          });
          this.$http({
            url: this.$http.adornUrl(`/link/${this.dataForm.id ? 'update' : 'save'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'title': this.dataForm.title,
              'linkUrl': this.dataForm.linkUrl
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$Message.success({
                content: '操作成功',
                duration: 2,
                onClose: () => {
                  this.handleCancel();
                  this.$emit('refreshDataList')
                }
              });
            } else {
              this.$Message.error(data.msg);
              this.showLoading = false;
            }
          })
        }
      })
    }
  }
}
</script>
